<template>
  <div class="bf-commont-template">
    <!-- 联系信息 -->
    <!-- <el-card class="box-card"> -->
      <div slot="header" class="clearfix">
        <!-- <span>联系信息</span> -->
        <div class="clearfix card-slot">
          <div class="float-l">
            <span class="bar-l"></span><span>联系信息</span>
          </div>
          <div class="float-r">
            <!-- <el-button class="car-action" type="text" @click="contactInfoStatus = !contactInfoStatus">编辑</el-button> -->
          </div>
        </div>
      </div>
      <div :class="contactInfoStatus?'input-border-b':'input-border-none'" class="relative">
        <!-- <div :class="contactInfoStatus?'':'mask'"></div> -->
          <div v-if="!contactInfoStatus" class="roster-inner-detail">
            <div class="clearfix relative">
              <div v-for="item in contractinfoSetting" :key="item.field" class="clearfix">
                <div class="lable"><span>{{item.title}}</span></div>
                <div class="value"><span>{{form[item.field]}}</span></div>
              </div>
              <div class="one-action">
                <div @click="contactInfoStatus = !contactInfoStatus" class="color"><img src="../../../../../../assets/beneform4j/roster/roster_icon_edit.png" alt=""><span>编辑</span></div>
              </div>
            </div>
          </div>

          <div v-if="contactInfoStatus" class="int-content clearfix rp-content inner">
            <el-form
              ref="form"
              :model="form"
              :rules="editRules"
              label-width="137px"
              :label-position="'right'"
              class="clearfix">
              <div
                v-for="item in contractinfoSetting"
                :key="item.field"
                v-if="!item.hideEdit"
                class="bf-table-form-item padding-l padding-r">
                <component
                  v-if="!item.slot"
                  v-bind:is="'bf-form-'+item.type"
                  :form="form"
                  :item="item"
                  :disabled="item.disableEdit"
                  :rules="editRules">
                </component>
              </div>
            </el-form>
            <div class="w-100" :hidden="!contactInfoStatus">
              <div class="w-12"></div>
              <div>
                <el-button type="primary" @click="saveContactinfo(form)">保存</el-button>
                <el-button  @click="contactInfoStatus=false">取消</el-button>
              </div>
            </div>
          </div>
      </div>
    </el-card>
    <div class="gap"></div>

    <!-- <el-card class="box-card"> -->
      <div slot="header" class="clearfix">
        <!-- <span>紧急联系人</span> -->
        <div class="clearfix card-slot">
          <div class="float-l">
            <span class="bar-l"></span><span>紧急联系人</span>
          </div>
          <div class="float-r">
            <!-- <el-button class="car-action" type="text" @click="editEmergStatus = !editEmergStatus">编辑</el-button> -->
          </div>
        </div>
      </div>
      <div :class="editEmergStatus?'input-border-b':'input-border-none'" class="relative">
        <!-- <div :class="editEmergStatus?'':'mask'"></div> -->
          <div v-if="!editEmergStatus" class="roster-inner-detail">
            <div class="clearfix relative">
              <div v-for="item in jlContractinfoSetting" :key="item.field" class="clearfix">
                <div class="lable"><span>{{item.title}}</span></div>
                <div class="value"><span>{{form[item.field]}}</span></div>
              </div>
              <div class="one-action">
                <div @click="editEmergStatus = !editEmergStatus" class="color"><img src="../../../../../../assets/beneform4j/roster/roster_icon_edit.png" alt=""><span>编辑</span></div>
              </div>
            </div>
          </div>

          <div v-if="editEmergStatus" class="int-content clearfix rp-content inner">
            <el-form
              ref="form"
              :model="form"
              :rules="editRules"
              label-width="137px"
              :label-position="'right'"
              class="clearfix">
              <div
                v-for="item in jlContractinfoSetting"
                :key="item.field"
                v-if="!item.hideEdit"
                class="bf-table-form-item padding-l padding-r">
                <component
                  v-if="!item.slot"
                  v-bind:is="'bf-form-'+item.type"
                  :form="form"
                  :item="item"
                  :disabled="item.disableEdit"
                  :rules="editRules">
                </component>
              </div>
            </el-form>

            <div class="w-100" :hidden="!editEmergStatus">
              <div class="w-12"></div>
              <div>
                <el-button type="primary" @click="saveDmergency(form)">保存</el-button>
                <el-button  @click="editEmergStatus=false">取消</el-button>
              </div>
            </div>
          </div>
      </div>
    <!-- </el-card> -->
    <div class="gap"></div>

    <!-- <el-card class="box-card"> -->
      <div slot="header" class="clearfix">
        <!-- <span>家庭情况</span> -->
        <div class="clearfix card-slot">
          <div class="float-l">
            <span class="bar-l"></span><span>家庭成员</span>
          </div>
          <div class="float-r">
            <el-button class="car-action" type="text" @click="addFamilyMembers">新增</el-button>
          </div>
        </div>
      </div>
      <div>
          <div v-if="familyMembers.length == 0" class="data-null">
            <img src="../../../../../../assets/beneform4j/roster/icon_not_record.png" alt="">
            <div class="text-c">
              <span>
                暂无家庭成员信息
              </span>
            </div>
          </div>
          <div  v-for="item in familyMembers" :key="item.id"  :class="item._editing?'form-editing input-border-b':'form-edited input-border-none'">
            <div class="int-content clearfix rp-content relative inner">
              <!-- <div :class="item._editing?'':'mask'"></div> -->
              <div>
                <div>成员姓名:</div>
                <div>
                  <el-input v-model="item.memberName" v-if="item._editing"></el-input>
                  <div class="int-iput-value"  v-if="!item._editing"><span >{{item.memberName}}</span></div>
                </div>
              </div>
              <div>
                <div>关系:</div>
                <div>
                  <el-input v-model="item.relationship" v-if="item._editing"></el-input>
                  <div class="int-iput-value"  v-if="!item._editing"><span >{{item.relationship}}</span></div>
                </div>
              </div>
              <div>
                <div>工作单位:</div>
                <div>
                  <el-input v-model="item.workCompany" v-if="item._editing"></el-input>
                  <div class="int-iput-value"  v-if="!item._editing"><span >{{item.workCompany}}</span></div>
                </div>
              </div>
              <div>
                <div>任职岗位:</div>
                <div>
                  <el-input v-model="item.position" v-if="item._editing"></el-input>
                  <div class="int-iput-value"  v-if="!item._editing"><span >{{item.position}}</span></div>
                </div>
              </div>
              <div>
                <div>出生日期:</div>
                <div>
                  <!-- <el-input v-model="item.birthDate" v-if="item._editing"></el-input> -->
                  <el-date-picker
                    v-if="item._editing"
                    v-model="item.birthDate"
                    type="date"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期">
                  </el-date-picker>
                  <div class="int-iput-value"  v-if="!item._editing"><span >{{item.birthDate}}</span></div>
                </div>
              </div>
              <div>
                <div>成员电话:</div>
                <div>
                  <el-input v-model="item.memberTel" v-if="item._editing"></el-input>
                  <div class="int-iput-value"  v-if="!item._editing"><span >{{item.memberTel}}</span></div>
                </div>
              </div>
              <div class="w-100" v-if="item._editing">
                <div class="action-button">
                  <el-button type="primary" @click="saveFamilyMembers(item)">保存</el-button>
                  <!-- <el-button type="primary" @click="editFamilyMembers(item)">编辑</el-button> -->
                  <!-- <el-button type="primary" @click="deleteFamilyMembers(item)">删除</el-button> -->
                  <el-button @click="item._editing = false; deleteFamilyMembers(item, true)">取消</el-button>
                </div>
              </div>

              <div class="list-edit" v-if="!item._editing">
                <div @click="editFamilyMembers(item)"><img src="../../../../../../assets/beneform4j/roster/roster_icon_edit.png" alt=""><span>编辑</span></div>
              </div>
              <div class="list-delete" v-if="item._editing">
                <div  @click="deleteFamilyMembers(item)"><img src="../../../../../../assets/beneform4j/roster/roster_icon_delete.png" alt=""><span>删除</span></div>
              </div>
            </div>

            <!-- <div class="int-content clearfix border-b">
              <div class="w-100" >
                <div class="w-12"></div>
                <div>

                  <el-button type="primary" @click="saveFamilyMembers(item)">保存</el-button>
                  <el-button type="primary" @click="editFamilyMembers(item)">编辑</el-button>
                  <el-button type="primary" @click="deleteFamilyMembers(item)">删除</el-button>
                  <el-button @click="item._editing = false">取消</el-button>
                </div>
              </div>
            </div> -->
          </div>
      </div>
    <!-- </el-card> -->
    <div class="gap"></div>

  </div>
</template>

<script>
import { editContractinfoApi, deleteContactApi, getContactApi, addContactApi, editContactApi, getEmployeeInfoApi, saveDmergencyApi } from '../api'
import { contractinfoSetting, jlContractinfoSetting } from './form'
export default {
  props: ['employeeData'],
  data() {
    return {
      editRules: {},
      contractinfoSetting: contractinfoSetting,
      jlContractinfoSetting: jlContractinfoSetting,
      employeeNo: '',
      form: {},
      familyMembers: [],
      contactInfoStatus: false, // 联系人信息
      editEmergStatus: false // 紧急联系人
    }
  },
  mounted: function() {
    this.employeeNo = this.employeeData.employeeNo
    // 获取家庭成员信息
    this.getFamilyMembers()
    // 获取员工信息
    this.getJobInfo()
  },
  methods: {
    saveContactinfo(form) {
      // console.log(form)
      editContractinfoApi(form).then(response => {
        if (response.success) {
          this.$message({
            message: '修改联系人信息成功',
            type: 'success'
          })
          this.contactInfoStatus = false
          this.editEmergStatus = false
          this.getJobInfo()
        }
      })
    },
    saveDmergency(form) {
      // 保存紧急联系人
      // console.log(form)
      const params = {
        emergencyContact: form.emergencyContact,
        relationship: form.relationship,
        emergencyContactMobile: form.emergencyContactMobile,
        emergencyContactAddr: form.emergencyContactAddr,
        employeeNo: this.employeeNo
      }
      saveDmergencyApi(params).then(response => {
        if (response.success) {
          this.$message({
            message: '修改紧急联系人信息成功',
            type: 'success'
          })
          this.editEmergStatus = false
          this.getJobInfo()
        }
      })
    },
    getJobInfo() {
      getEmployeeInfoApi(this.employeeNo).then(response => {
        this.form = response.data
        // console.log(this.form)
      })
    },
    deleteFamilyMembers(item, status) {
      if (item._add === true) {
        this.familyMembers.forEach((v, i) => {
          if (v == item) {
            this.familyMembers.splice(i, 1)
          }
        })
        return
      }
      if (status) {
        return
      }
      deleteContactApi(item).then(response => {
        if (response.success) {
          this.$message({
            message: '删除家庭成员成功',
            type: 'success'
          })
          item._editing = false
          this.getFamilyMembers()
        }
      })
    },
    editFamilyMembers(item) {
      this.$set(item, '_editing', true)
    },
    getFamilyMembers() {
      getContactApi(this.employeeNo).then(response => {
        this.familyMembers = response.data
      })
    },
    addFamilyMembers() {
      // console.log('添加家庭成员')
      this.familyMembers.unshift({
        _editing: true,
        _add: true
      })
    },
    saveFamilyMembers(item) {
      // console.log('保存家庭成员')
      item.employeeNo = this.employeeNo
      if (item._add) {
        item._add = false
        addContactApi(item).then(response => {
          // console.log(response)
          if (response.success) {
            item._editing = false
            this.$message({
              message: '添加家庭成员成功',
              type: 'success'
            })
            this.getFamilyMembers()
          }
        })
      } else {
        editContactApi(item).then(response => {
          // console.log(Response)
          if (response.success) {
            item._editing = false
            this.$message({
              message: '修改家庭成员成功',
              type: 'success'
            })
            this.getFamilyMembers()
          }
        })
      }
    }
  }
}
</script>

<style scoped>

@import './form.css';
</style>
